<template>
<div>
  <div class="in_con_teb">
    <ul class="in_con_ele bdr dip">
      <li class="in_con_text dip" v-for="(INconTEB,index) in InConTeb " :key="index" :class="{'acrtive':ind == index}"  @click="reds(index,INconTEB.tebURl)" >{{INconTEB.tebText}}</li>
    </ul> 
  </div>
  <!-- <transition :name="transiti">   -->
    <router-view class="router"></router-view>  
  <!-- </transition> -->
</div>
</template>
<script>
export default {
  data(){
    return {
      // transiti: 'slide-right',
      InConTeb:[
        {
          tebText:'商品介绍',
          tebURl:'/bomNav',
        },{
          tebText:'方案A',
          tebURl:'/bomNav/teb/caseA',
        },{
          tebText:'方案B',
          tebURl:'/bomNav/teb/caseB',
        },{
          tebText:'海报一点通',
          tebURl:'/bomNav/teb/poster',
        }
      ],
      ind:0,
    }
  }
  , methods:{
    reds:function(index,item){
        let _this = this ;
        _this.$router.push({path:''+item+''})      
        _this.ind = index;
    }
  },
   watch: {  
    '$route' (to, from) { //这个在总页面的 添加才有晓得 
      if(to.path == '/bomNav/teb'){  //到
        // this.transiti = 'slide-left';  
      }else if(from.path === '/bomNav/teb'){ //走
        // this.transiti = 'slide-right';  
      }   
    }  
  } 
}
</script>
<style lang="scss" scoped>
.in_con_teb{
  padding:0rem .4rem .2rem .4rem;
  .in_con_ele{
    border: .01rem #DEDEDE solid;
    height: 0.7rem;
    .in_con_text{
      width: 25%;
      height: 100%;
      align-items: center;
      justify-content: center;
      color:#666666;
      font-size:.22rem;
      font-weight: 500;
    -webkit-transition: all .5s;
      -o-transition: all .5s;
      -moz-transition: all .5s;
      transition: all .5s;
      border-right: .01rem solid #DEDEDE;
    }
    .in_con_text:nth-child(1){
      -webkit-border-top-left-radius: .1rem;
          -moz-border-radius-topleft: .1rem;  
              border-top-left-radius: .1rem;
    -webkit-border-bottom-left-radius:.1rem;
        -moz-border-radius-bottomleft:.1rem;
            border-bottom-left-radius:.1rem;
    }
    .in_con_text:nth-child(4){
      border:none;
     -webkit-border-top-right-radius:.1rem;
         -moz-border-radius-topright:.1rem;
             border-top-right-radius:.1rem;  
  -webkit-border-bottom-right-radius:.1rem;
      -moz-border-radius-bottomright:.1rem;
          border-bottom-right-radius:.1rem;
    }
  }
  .acrtive{
    background: #999999;
    color:#fff !important;
  }
}
.router {  
     width: 100%;  
     transition: all .2s ease;  
}  
    .slide-left-enter,  
 .slide-right-leave-active {  
     opacity: 0;  
    -webkit-transform: translate(100%, 0);  
    transform: translate(100%, 0);  
}  
  
.slide-left-leave-active,  
.slide-right-enter {  
     opacity: 0;  
    -webkit-transform: translate(-100%, 0);  
    transform: translate(-100% 0);  
} 
</style>
